import styled from 'styled-components';

import download from '@/assets/img/download.png';
import bannerSprite from '@/assets/img/banner_sprite.png';

export const BannerWrapper = styled.div`
  background: url(${(props) => props.bgImage}) center center/6000px;

  .banner {
    height: 285px;

    display: flex;
    position: relative;
  }
`;

export const BannerLeft = styled.div`
  width: 730px;

  .banner-item {
    overflow: hidden;
    height: 285px;
    .image {
      width: 100%;
      height: 285px;
    }
  }

  .slick-dots {
    li {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      button {
        display: block;
        width: 8px;
        height: 8px;
        background-color: #fff;
        border-radius: 4px;
      }

      &:hover {
        button {
          background-color: #b90b0b;
        }
      }
    }

    li.slick-active {
      button {
        background-color: #b90b0b;
      }
    }
  }
`;

export const BannerRight = styled.a.attrs({
  href: 'https://music.163.com/#/download',
  target: '_blank'
})`
  width: 254px;
  height: 285px;
  background: url(${download});
`;

export const BannerControl = styled.div`
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  .btn {
    position: absolute;
    width: 37px;
    height: 64px;
    background-image: url(${bannerSprite});
    background-color: transparent;
    cursor: pointer;
    margin-top:-32px;

    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }

  .left {
    left: -68px;
    background-position: 0 -360px;
  }

  .right {
    right: -68px;
    background-position: 0 -508px;
  }
`;
